<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<style>
#scroller {
  width: 500px;
  height: 500px;
  overflow: scroll;
  scroll-snap-type: x mandatory;

  /* Ensure scroller gets composited scrolling when available. */
  background: white;
  contain: paint;
}
#space {
  width: 2000px;
  height: 2000px;
}
.target {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100px;
  scroll-snap-align: start;
  background-color: blue;
}
</style>

<div id="scroller">
  <div id="space"></div>
  <div class="target" style="left: 0px;"></div>
  <div class="target" style="left: 120px;"></div>
  <div class="target" style="left: 240px;"></div>
</div>

<script>
const scroller = document.getElementById("scroller");

function scrollLeft() {
  return scroller.scrollLeft;
}

function touchpadScroll(delta, x, y, direction) {
  // A touchpat scroll comes from mouse input with precise delta.
  return smoothScroll(delta, x ,y , GestureSourceType.MOUSE_INPUT, direction,
                      SPEED_INSTANT, true /* is precise delta */);
}

function cleanup() {
  scroller.scrollTo(0, 0);
  assert_approx_equals(scroller.scrollLeft, 0, 1);
}

promise_test (async t => {
  t.add_cleanup(cleanup);
  // scroll just 10px so the current snap point remains closest.
  await touchpadScroll(10 /* pixels to scroll */, 50, 50, 'right');
  await waitForAnimationEndTimeBased(scrollLeft);
  assert_approx_equals(scroller.scrollLeft, 0, 1);
}, "Touchpad scrolling (right) should prefer the closest snap area regardless"
   + " of scroll direction.");

promise_test (async t => {
  t.add_cleanup(cleanup);

  scroller.scrollTo(120, 0);
  assert_approx_equals(scroller.scrollLeft, 120, 1);

  // Scroll passed the last snap point.
  await touchpadScroll(10 /* pixels to scroll */, 50, 50, 'left');
  await waitForAnimationEndTimeBased(scrollLeft);
  assert_approx_equals(scroller.scrollLeft, 120, 1);
}, "Touchpad scrolling (left) should prefer the closest snap area regardless of"
   + " scroll direction.");


promise_test (async t => {
  t.add_cleanup(cleanup);
  // Scroll so we pass the second snap point and a closest to third.
  await touchpadScroll(220 /* pixels to scroll */, 50, 50, 'right');
  await waitForAnimationEndTimeBased(scrollLeft);
  assert_approx_equals(scroller.scrollLeft, 240, 1);
}, "Touchpad scrolling should prefer the closest snap point in scroll to the"
   + " scroll end position.");

</script>
